<template>
	<view>
		<template>
			<u-form :model="form" ref="uForm">
				<u-form-item label="店铺名:" label-width="80px" prop="storeName" style="padding-left: 10px;">
					<u-input v-model="form.storeName" />
				</u-form-item>
				<u-form-item label="店铺头像:" label-width="80px" style="padding-left: 10px;" prop="storeImg">
					<template>
						<u-upload ref="uUpload" :action="action" :auto-upload="true" max-count="1" @on-remove="onRemove"
							:max-size="5 * 1024 * 1024" @on-uploaded="onUploaded"></u-upload>
					</template>
				</u-form-item>
				<u-form-item class="a1">
					<u-button size="mini" :ripple="true" :custom-style="customStyle" @click="fourShopSubmit">提交
					</u-button>
					<u-button size="mini" :ripple="true" @click="cancel">取消</u-button>
				</u-form-item>
			</u-form>
		</template>
		<template>
			<view>
				<u-modal v-model="show" :content="content" title="提示" @confirm="confirm"></u-modal>
			</view>
		</template>
	</view>
</template>

<script>
	import request from '../../../utils/request.js'
	export default {
		data() {
			return {
				show:false,
				content:'恭喜成为商户,请等待1-3个工作日审批',
				action: 'http://localhost:9090/before/bgs/store/FourOpenImg',
				filesArr: [],
				form: {
					beforeUserId: undefined,
					storeName: '',
					storeImg: '',
				},
				customStyle: {
					// marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'blue'
				},
				rules: {
					storeName: [{
							required: true,
							message: '请输入店铺名',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						// 6-8个字符之间的判断
						{
							min: 5,
							max: 8,
							message: '长度在5-8个字符之间',
							trigger: ['blur', 'change']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或汉字',
							trigger: ['blur', 'change']
						},
					],
					storeImg: [{
						required: true,
						message: '请添加图片',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			cancel() {
				// #ifdef APP-PLUS
				wx.navigateBack({
					changed: true
				})
				// #endif
				window.history.back()
			},
			// shoudongSubmit() {

			// 	let files = [];
			// 	// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
			// 	files = this.$refs.uUpload.lists.filter(val => {
			// 		return val.progress == 100;
			// 	})
			// 	// 如果您不需要进行太多的处理，直接如下即可
			// 	files = this.$refs.uUpload.lists;
			// 	console.log(files)
			// },
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			onUploaded(lists, name) {
				this.form.storeImg = lists[0].response
			},
			fourShopSubmit() {
				// request({
				// 	url: '/before/bgs/store/FourOpenShop',
				// 	methods: 'POST',
				// 	data: this.form,
				// 	success: (res) => {
				// 		console.log('成功')
				// 		}
				// 	})
				// uni.request({
				// 	url: 'http://localhost:9090/before/bgs/store/FourOpenShop',
				// 		method: 'POST',
				// 		data: this.form,
				// 		success: (res) => {
				// 			console.log('成功')
				// 		}
				// })
				uni.getStorage({
					key: 'beforeUser',
					success: (ref) => {
						this.form.beforeUserId = ref.data.beforeUserId
					}
				})
				this.$refs.uForm.validate(valid => {
					if (valid) {
						request({
							url: '/before/bgs/store/FourOpenShop',
							method: 'Post',
							data: this.form,
							success: (res) => {
								console.log('添加成功')
								this.show = true 
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			confirm(){
				uni.reLaunch({
					url: "../../profile/profile"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.a1 {
		button {
			margin-left: 35px;
		}
	}
</style>
